<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多模态敏感数据检测系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            padding: 40px;
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 2.5em;
        }
        
        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            border-bottom: 2px solid #eee;
        }
        
        .tab {
            padding: 15px 30px;
            cursor: pointer;
            border: none;
            background: none;
            font-size: 16px;
            color: #666;
            transition: all 0.3s;
        }
        
        .tab.active {
            color: #667eea;
            border-bottom: 3px solid #667eea;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .upload-area {
            border: 3px dashed #667eea;
            border-radius: 15px;
            padding: 60px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 20px;
        }
        
        .upload-area:hover {
            background: #f5f7ff;
            border-color: #764ba2;
        }
        
        .upload-area.dragover {
            background: #eef2ff;
            border-color: #764ba2;
        }
        
        .text-input {
            width: 100%;
            min-height: 200px;
            padding: 15px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 14px;
            font-family: inherit;
            resize: vertical;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s;
            margin: 10px 5px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .result-area {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
        }
        
        .risk-badge {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: bold;
            margin: 10px 0;
        }
        
        .risk-high {
            background: #fee;
            color: #c00;
        }
        
        .risk-medium {
            background: #ffeaa7;
            color: #d63031;
        }
        
        .risk-low {
            background: #d5f4e6;
            color: #00b894;
        }
        
        .detected-item {
            background: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }
        
        .image-preview {
            max-width: 100%;
            border-radius: 10px;
            margin: 20px 0;
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            color: #667eea;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🛡️ 多模态敏感数据检测系统</h1>
        
        <div class="tabs">
            <button class="tab active" onclick="switchTab('image')">图片检测</button>
            <button class="tab" onclick="switchTab('text')">文本检测</button>
        </div>
        
        <!-- 图片检测 -->
        <div id="image-tab" class="tab-content active">
            <div class="upload-area" id="image-upload" 
                 ondrop="handleDrop(event)" 
                 ondragover="handleDragOver(event)"
                 ondragleave="handleDragLeave(event)">
                <p>📷 点击或拖拽图片到此处上传</p>
                <input type="file" id="image-input" accept="image/*" style="display: none;" onchange="handleImageSelect(event)">
            </div>
            <div id="image-preview" class="hidden"></div>
            <button class="btn" onclick="document.getElementById('image-input').click()">选择图片</button>
            <button class="btn" onclick="detectImage()" id="detect-image-btn" disabled>开始检测</button>
            <button class="btn" onclick="maskImage()" id="mask-image-btn" disabled>打码处理</button>
        </div>
        
        <!-- 文本检测 -->
        <div id="text-tab" class="tab-content">
            <textarea class="text-input" id="text-input" placeholder="请输入或粘贴需要检测的文本内容..."></textarea>
            <button class="btn" onclick="detectText()">开始检测</button>
            <button class="btn" onclick="maskText()" id="mask-text-btn" disabled>打码处理</button>
        </div>
        
        <!-- 结果显示 -->
        <div id="result-area" class="result-area hidden">
            <h2>检测结果</h2>
            <div id="risk-badge"></div>
            <div id="detected-items"></div>
            <div id="masked-result"></div>
        </div>
    </div>
    
    <script>
        // 自动获取当前端口
        const API_BASE = `${window.location.protocol}//${window.location.host}/api`;
        let currentImage = null;
        let currentDetectionResult = null;
        
        function switchTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            
            if (tab === 'image') {
                document.querySelector('.tab').classList.add('active');
                document.getElementById('image-tab').classList.add('active');
            } else {
                document.querySelectorAll('.tab')[1].classList.add('active');
                document.getElementById('text-tab').classList.add('active');
            }
        }
        
        function handleDragOver(e) {
            e.preventDefault();
            e.currentTarget.classList.add('dragover');
        }
        
        function handleDragLeave(e) {
            e.currentTarget.classList.remove('dragover');
        }
        
        function handleDrop(e) {
            e.preventDefault();
            e.currentTarget.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleImageFile(files[0]);
            }
        }
        
        function handleImageSelect(e) {
            if (e.target.files.length > 0) {
                handleImageFile(e.target.files[0]);
            }
        }
        
        function handleImageFile(file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                currentImage = e.target.result;
                const preview = document.getElementById('image-preview');
                preview.innerHTML = `<img src="${currentImage}" class="image-preview" alt="预览">`;
                preview.classList.remove('hidden');
                document.getElementById('detect-image-btn').disabled = false;
            };
            reader.readAsDataURL(file);
        }
        
        async function detectImage() {
            if (!currentImage) return;
            
            const btn = document.getElementById('detect-image-btn');
            btn.disabled = true;
            btn.textContent = '检测中...';
            
            try {
                const response = await fetch(`${API_BASE}/detect`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        type: 'image',
                        content: currentImage
                    })
                });
                
                const result = await response.json();
                currentDetectionResult = result;
                displayResult(result);
                document.getElementById('mask-image-btn').disabled = false;
            } catch (error) {
                alert('检测失败: ' + error.message);
            } finally {
                btn.disabled = false;
                btn.textContent = '开始检测';
            }
        }
        
        async function detectText() {
            const text = document.getElementById('text-input').value;
            if (!text.trim()) {
                alert('请输入文本内容');
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/detect`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        type: 'text',
                        content: text
                    })
                });
                
                const result = await response.json();
                currentDetectionResult = result;
                displayResult(result);
                document.getElementById('mask-text-btn').disabled = false;
            } catch (error) {
                alert('检测失败: ' + error.message);
            }
        }
        
        async function maskImage() {
            if (!currentImage || !currentDetectionResult) return;
            
            try {
                const response = await fetch(`${API_BASE}/mask`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        type: 'image',
                        content: currentImage,
                        detected_items: currentDetectionResult.detected_items
                    })
                });
                
                const result = await response.json();
                const maskedArea = document.getElementById('masked-result');
                maskedArea.innerHTML = `
                    <h3>打码后图片</h3>
                    <img src="${result.masked_content}" class="image-preview" alt="打码后">
                    <p>已打码 ${result.masked_items_count} 处敏感信息</p>
                `;
            } catch (error) {
                alert('打码失败: ' + error.message);
            }
        }
        
        async function maskText() {
            const text = document.getElementById('text-input').value;
            if (!currentDetectionResult) return;
            
            try {
                const response = await fetch(`${API_BASE}/mask`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        type: 'text',
                        content: text,
                        detected_items: currentDetectionResult.detected_items
                    })
                });
                
                const result = await response.json();
                const maskedArea = document.getElementById('masked-result');
                maskedArea.innerHTML = `
                    <h3>打码后文本</h3>
                    <div style="background: white; padding: 15px; border-radius: 8px; white-space: pre-wrap;">${result.masked_content}</div>
                    <p>已打码 ${result.masked_items_count} 处敏感信息</p>
                `;
            } catch (error) {
                alert('打码失败: ' + error.message);
            }
        }
        
        function displayResult(result) {
            const resultArea = document.getElementById('result-area');
            resultArea.classList.remove('hidden');
            
            const riskBadge = document.getElementById('risk-badge');
            const riskLevel = result.risk_level || 'low';
            riskBadge.innerHTML = `
                <span class="risk-badge risk-${riskLevel}">
                    风险等级: ${riskLevel.toUpperCase()} | 检测到 ${result.count || 0} 处敏感信息
                </span>
            `;
            
            const itemsDiv = document.getElementById('detected-items');
            if (result.detected_items && result.detected_items.length > 0) {
                itemsDiv.innerHTML = '<h3>检测到的敏感信息:</h3>' + 
                    result.detected_items.map((item, idx) => `
                        <div class="detected-item">
                            <strong>${idx + 1}. ${item.type}</strong>
                            <p>内容: ${item.content || 'N/A'}</p>
                            <p>置信度: ${(item.confidence * 100).toFixed(1)}%</p>
                        </div>
                    `).join('');
            } else {
                itemsDiv.innerHTML = '<p>✅ 未检测到敏感信息</p>';
            }
        }
    </script>
</body>
</html>

